<template>
	<div class="conventional-wrapper">
		<!-- 常规匹配 -->
		<el-row>
			<el-col span="11" class="record-mark">
				<p class="text">是否开启视频打点</p>
				<span class="img-question">
					<img src="@/assets/img/aiworkflowimage/question.png" width="12px" />
					<span class="desc">打点策略：AI坐席播报完成后，若需要访客回答，则在AI坐席播报完成后进行打点。</span>
				</span>
			</el-col>
			<el-col span="12">
				<el-radio-group v-model="isRecordStep" :disabled="showDetail" @change="selectVideoMark">
					<el-radio v-for="item in keyLabelOptions" :label="item.value" :key="item.value">{{ item.label }}</el-radio>
				</el-radio-group>
			</el-col>
		</el-row>
		<el-row>
			<el-col span="11">
				<p class="text robot">机器人异常</p>
			</el-col>
			<el-col span="12">
				<el-select v-model="exceptionNext" :disabled="showDetail" placeholder="" class="exception" @change="selectException">
					<el-option v-for="item in rebotExceptionOptions" :key="item.value" :label="item.label" :value="item.value">{{ item.label }} </el-option>
				</el-select>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import AIWorkflow from '@/modules/workFlow.js';
export default {
	props: {
		showDetail: {
			type: Boolean,
			default: () => false
		}
	},
	data() {
		return {
			keyLabelOptions: AIWorkflow.getKeyLabelOptions(),
			rebotExceptionOptions: AIWorkflow.getRebotExceptionOptions(),
			isRecordStep: 0, // 是否开启视频打点
			exceptionNext: ''
		};
	},
	mounted() {
		this.exceptionNext = AIWorkflow.exceptionNext;
		this.isRecordStep = AIWorkflow.getVideoMarks() ? 1 : 0;
		this.isRecordStep = AIWorkflow.videoMarks.isOn ? 1 : 0;
	},
	methods: {
		selectVideoMark(val) {
			console.log(val);
			AIWorkflow.setVideoMarks({ isOn: val === 1 });
		},
		selectException(val) {
			AIWorkflow.setExceptionNext(val);
		}
	}
};
</script>

<style lang="less" scoped>
.conventional-wrapper {
	.record-mark {
		position: relative;
	}
	.desc {
		display: none;
		width: 300px;
		height: 60px;
		white-space: normal;
		word-break: break-all;
		position: fixed;
		left: 460px;
		top: 240px;
		z-index: 2000;
		border: 1px solid #e6e7e9;
		border-radius: 5px;
		background-color: #fff;
		font-size: 10px;
		// overflow: hidden;
		padding: 10px;
	}
	.img-question {
		position: absolute;
		right: 14px;
		top: 0px;
	}
	.text {
		padding: 0 30px 0 0;
		text-align: right;
	}
	.robot {
		line-height: 34px;
	}
	.el-col {
		padding: 10px 0;
	}
	.img-question:hover .desc {
		display: inline-block;
	}
}
</style>

<style lang="less">
.exception .el-input .el-select__caret {
	line-height: 27px;
}
</style>
